<template>
  <div>
    <table>
      <tr>
        <td>借款名称</td>
        <td>借款总金额</td>
        <td>剩余金额</td>
        <td>还款期限</td>
        <td>借款用途</td>
        <td>利息</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in dict" :key="i">
        <td>{{ i.name }}</td>
        <td>{{ i.total_money }}</td>
        <td>{{ i.balance_money }}</td>
        <td>{{ i.repay_time }}</td>
        <td>{{ i.use1 }}</td>
        <td>{{ i.interest_rate }}</td>
        <td>
          <van-button @click="mark_bank(i.id,i.total_money,i.interest_rate,i.repay_time)">投资</van-button>
        </td>
      </tr>
    </table>
    <center>
      <div v-show="show_price">
        <h1>请输入支付金额</h1>
        <van-field label="支付金额" v-model="price" style="width: 220px;"></van-field>
        <van-button @click="quese">确认</van-button>
      </div>
    </center>
    <van-popup v-model:show="show_hours" closeable close-icon="close" :style="{ height: '70%' ,width: '30%' }">
      <center><h1>盈利{{money}}元</h1></center>
      <center><h1>请输入支付密码</h1></center>
      <van-field label="请输入支付密码" v-model="password" type="password"></van-field>
      <center>
        <van-button @click="queren">确认</van-button>
      </center>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "investment",
  data() {
    return {
      dict: [],
      show_hours: false,
      show_price: false,
      price: '',
      password: '',
      num:'',
      money:'',
      total_money:''
    }
  },
  mounted() {
    this.get_marklist()
  },
  methods: {
    quese() {
      this.money=(this.price/this.total_money)*this.money
      this.show_hours = true
      this.show_price = false
    },
    mark_bank(id,money,interest_rate,repay_time) {
      this.show_price = true
      this.num=id
      console.log(this.num)
      this.total_money=money
      // 总共利息
      console.log((interest_rate))
      this.money=((money*interest_rate)/12)*repay_time
    },
    queren() {
      this.myaxios('http://localhost:5000/get_user', 'get', {
        'uid': localStorage.getItem('usrid'),
        'code': this.password,
      })
          .then(res => {
            console.log(res)
            if (res.code=='200'){
              this.myaxios('http://localhost:5000/bidmark', 'post', {
                'userid': localStorage.getItem('usrid'),
                'num': this.num,
                'money': this.price
              })
                  .then(res => {
                    console.log(res)
                    if (res.code==200){
                      this.show_hours=false
                    }
                  })
            }else {
              alert(res.msg)
            }
            })

    },
    get_marklist() {
      this.myaxios('http://localhost:5000/get_marklist', 'get', {'nuid':2}).then(res => {
        console.log(res)
        this.dict = res.list

      })
    },
  }
}
</script>

<style scoped>

</style>
